import React, { PureComponent } from 'react'
import  axios from "axios";
import { addBanner , addProductList } from '../store/action'

import {connect} from 'react-redux'

export class Category extends PureComponent {
  constructor(props) {
    super()
  }

  componentDidMount() {
    axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
      this.props.addBanner(res.data.data.banner.list)
      this.props.addProductList(res.data.data.recommend.list)
    })
  }
  render() {
    const {banners} = this.props
    return (
      <div>
        <p>Category Page</p>
        <div>
          banners:
          {
            banners.map(item=>{
              return <p key={item.title}>{item.title}</p>
            })
          }
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    banners: state.banners,
    recommends: state.recommends
  }
};

const mapDispatchToProps = (dispatch) => {
  return{
    addBanner: (banner) => dispatch(addBanner(banner)),
    addProductList: (productList) => dispatch(addProductList(productList))
  }

}



export default connect(mapStateToProps, mapDispatchToProps)(Category) 